<template>
	<view class="th-file-box">
		<slot>
			<image class="file-image" :src="setImg(file.name)"></image>
		</slot>
		<view class="file-content-box">
			<view class="title-text text-zh" :style="{'-webkit-line-clamp':1}">{{file.name}}</view>
			<view class="desc-text">{{toMB(file.size)}}{{`&nbsp;&nbsp;&nbsp;`}}上传完成</view>
			<view class="text-priview" @tap="priview">预览</view>
		</view>


	</view>
</template>

<script>
	export default {
		name: "th-file",
		data() {
			return {

			};
		},
		props: {
			file: {
				type: Object,
				default: {}
			}
		},
		methods: {
			toMB(size) {
				if (size < 1024)
					return size + 'KB'
				else
					return (size / 1024).toFixed(2) + 'M'
			},
			priview() {
				this.$emit('priview', this.file)
			},
			getType(file) {
				let imgType = ['bmp', 'jpg', 'jpeg', 'png', 'tif', 'gif', 'pcx', 'tga', 'exif', 'fpx', 'svg', 'psd', 'cdr',
					'pcd', 'dxf', 'ufo', 'eps', 'ai', 'raw', 'WMF', 'webp'
				]
				let fileTypev = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt']
				let pdf = ['pdf']
				let spertas = file.split('.')
				if (spertas.length > 0) {
					if (spertas[spertas.length - 1].indexOf(imgType))
						return 'img'
					if (spertas[spertas.length - 1].indexOf(fileTypev))
						return 'txt'
					if (spertas[spertas.length - 1].indexOf(pdf))
						return 'pdf'
				}
				return 'unknow'
			},
			setImg(file) {
				let src = ''
				switch (this.getType(file)) {
					case 'img':
						src = '../../static/img/icon_94.png'
						break
					case 'txt':
						src = '../../static/img/icon_95.png'
						break
					case 'pdf':
						src = '../../static/img/icon_93.png'
						break
					default:
						src = '../../static/img/icon_92.png'
						break
				}
				return src
			},
		}
	}
</script>

<style scoped lang="scss">
	.th-file-box {
		width: 100%;
		min-height: 120rpx;
		background: #F6F7FB;
		border-radius: 8rpx;
		box-sizing: border-box;
		padding: 14rpx 24rpx;
		display: flex;
		align-items: center;
		border-radius: 8rpx;

		.file-image {
			width: 54rpx;
			height: 62rpx;
			white-space: nowrap;
		}

		.title-text {
			font-size: 30rpx;
			font-family: PingFang-SC-Medium, PingFang-SC;
			font-weight: 500;
			color: #333333;
			line-height: 42rpx;
			word-break: break-all;
		}

		.desc-text {
			font-size: 24rpx;
			font-family: PingFang-SC-Medium, PingFang-SC;
			font-weight: 500;
			color: #999999;
			line-height: 34rpx;
		}
	}

	.file-content-box {
		flex: 1;
		margin-left: 18rpx;
		position: relative;

		.text-priview {
			position: absolute;
			right: 0;
			bottom: 0;
			font-size: 24rpx;
			font-family: PingFang-SC-Medium, PingFang-SC;
			font-weight: 500;
			color: #0077FF;
			line-height: 34rpx;
		}
	}
</style>